<template>
	<view class="tourline-list-page--screen">
      <basic-bubble-popover 
        label="综合排序"
        icon="icon-caret" 
        :showButton="false" 
        ref="sortPopover"        
      >
        <view slot="content">
          <radio-group @change="sortChange">
                <label v-for="item in sortList" :key="item.value" class="radio--wrap">
                    <view class="label" :class="{active: item.value == sortParams.sortType}">{{item.label}}</view>
                    <view class="icon">
                        <radio color="#54DAE2" :value="item.value" :checked="item.value == sortParams.sortType" />
                    </view>
                </label>
            </radio-group>         
        </view>
      </basic-bubble-popover>
      <basic-bubble-popover 
        label="筛选"
        icon="icon-caret"
        @submit="submitSort"
        @cancel="cancelPriceDate"
        :textColor="sortParams.dateCount ||sortParams.minimumPrice||sortParams.maximumPrice ? '#54DAE2':'#1B2431'"
      >
        <view slot="content">
          <view class="filter--wrap">
            <view class="normal-title">价格区间</view>
            <view class="input--inner">
             <minMaxInput 
                @minBlur="handleMinPrice" 
                @maxBlur="handleMaxPrice" 
                :minValue="sortParams.minimumPrice | minMaxPrice" 
                :maxValue="sortParams.maximumPrice | minMaxPrice" 
              />
            </view>
            <view v-if="days.length > 0 && parseInt( params.categoryCode ) != 101">
              <view class="normal-title">行程天数</view>
              <view class="list--wrap">
                <view 
                  class="item" 
                  :class="{active: sortParams.dateCount === item.value}" 
                  v-for="item in days" 
                  :key="item.value"
                  @tap="chooseDate(item)"
                >   
                  {{item.name}}            
                </view>
              </view>              
            </view>
          </view>         
        </view>
      </basic-bubble-popover>
      <basic-bubble-popover 
        label="出发城市"
        icon="icon-caret"
        :showButton="false"   
        ref="cityChoosePopoer" 
      >
         <view slot="content">
           <view class="normal-title">选择出发城市</view>
           <scroll-view scroll-y="true" class="citys-scroll" >
                  <view class="list--wrap">
                    <view 
                      class="item" 
                      :class="{active: sortParams.regionId == item.regionId}" 
                      v-for="item in citys" 
                      :key="item.regionId"
                      @tap="chooseCity(item)"
                    >   
                      {{item.name}}            
                    </view>
                  </view>
           </scroll-view>
         </view>
      </basic-bubble-popover>
    </view>
</template>
<script>
import sdk from 'sdk'
import { HOT_CITYS, DEFAULT_CITY } from '@/model/enum'
import { departCities } from 'api'
import listSearch from '@/mixins/list-search'
import minMaxInput from '@/components/business/min-max-input'
import { minMaxPriceInput } from 'utils/helper/price'
export default {
  components: { minMaxInput },
  props: {
    params: { type: Object, default: () => {} },
  },
  mixins:[listSearch],
  watch: {
    params(val){
      this.sortParams = {...val}
      if(val.categoryCode == 101) {
        this.sortParams.dateCount = null
      }
    },
  },
	data(){
		return {			
			sortList: [
				{ label: '默认排序', value: '0'},
				{ label: '价格由低至高', value: '2' },
				{ label: '价格由高至低', value: '3' }
			],
      currentSort: 1,
      HOT_CITYS,
      citys: HOT_CITYS,// 第一个默认显示当前所在城市并勾选 + 热门城市 + 将已上架商品的出发城市按照首字母依次排序
      days: [
        { name:'1天', value: 1 },
        { name:'2天', value: 2 },
        { name:'3天', value: 3 },
        { name:'4天', value: 4 },
        { name:'5天', value: 5 },
        { name:'6天', value: 6 },
        { name:'7天及以上', value: 7 },
      ], 
      sortParams: {        
        "dateCount": null,// 出行天数
        "maximumPrice": null,
        "minimumPrice": null,
        "sortType": 0, // 0综合排序，2价格低到高，3价格高到低
        ...DEFAULT_CITY,
      },
		}
  },
  created(){     
    this.initDepartureCity()
  },
	methods: {	
    initDepartureCity() { // 初始化出发城市
      let hotCity = []
      if(this.params && this.params.regionId) {
        this.sortParams = { ...this.sortParams, ...this.params }
        hotCity = [this.params].concat(this.HOT_CITYS.filter(item=> parseInt(item.regionId) != parseInt(this.params.regionId)))
      } else {
        hotCity = this.HOT_CITYS
      }
      departCities().then(res => {
        this.citys = hotCity.concat(res.result.filter(item=> {
          return hotCity.findIndex(fi=> parseInt(fi.regionId) == parseInt(item.regionId)) == -1
        }))
      })
    },	
		sortChange(evt) {
      this.sortParams.sortType = parseInt(evt.target.value)
      this.$emit('submit', this.sortParams)
      this.$refs.sortPopover.show = false
    },
    submitSort() {   
      if( (this.sortParams.minimumPrice != null && this.sortParams.maximumPrice != null) && this.sortParams.minimumPrice > this.sortParams.maximumPrice ) {
        const max = this.sortParams.minimumPrice
        this.sortParams.minimumPrice = this.sortParams.maximumPrice
        this.sortParams.maximumPrice = max
      }
      this.$emit('submit', this.sortParams)
    },
    cancelSort() {
      this.sortParams.sortType = 0
      this.$emit('submit', this.sortParams)
    },
    cancelPriceDate() {
      this.sortParams.minimumPrice = null
      this.sortParams.maximumPrice = null
      this.sortParams.dateCount = null
      this.$emit('submit', this.sortParams)
    },
    chooseDate(item) {
      this.sortParams.dateCount = item.value
    },
    chooseCity(item) {
      const { name, regionId } = item
      this.sortParams.name = name
      this.sortParams.regionId = regionId
      this.selectCityFlag = true
      sdk.selectCity({
        regionId: regionId,
        name: name,
        country: 0
      })
      this.$emit('submit', this.sortParams)
      this.$refs.cityChoosePopoer.show = false
    },
    handleMinPrice(e) {
      this.sortParams.minimumPrice = minMaxPriceInput(e.detail.value)
    },
    handleMaxPrice(e) {
      this.sortParams.maximumPrice = minMaxPriceInput(e.detail.value)
    }
	}
}
</script>
<style lang="less">

  .tourline-list-page--screen{
    margin:20rpx 0;
    display: flex;    
    .normal-title{
      font-size: 28rpx;
      margin: 32rpx 0 16rpx 0;
      font-weight: 600;
    }
    .radio--wrap{
      color: @font_color;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;
      line-height: 80rpx;
      margin-right:-6rpx;
      /deep/ .uni-radio-input{
        margin-right:0;
      }
      .label{
        &.active{
          font-weight: 600;
        }
      }
      .icon{
        transform: scale(0.7)
      }
    }
    .filter--wrap{
      .input--inner{
      }  
      .radio--inner{
        display: flex;
        font-size: 28rpx;
        .radio{
          margin-right: 50rpx;
          display:flex;
          align-items: center; 
          &.checked{
            color: @theme_color;
          }                   
        }
        .icon{
          margin-right: 8rpx;
          display: inline-block;
          width: 24rpx;
          height: 24rpx;
          border-radius: 24rpx;
          border: 1px solid #E4EBF4;
          &.checked{
            display: inline-block;
            width: 24rpx;
            height: 24rpx;
            border-radius: 24rpx;
            border: 1px solid @theme_color;
            position: relative;
            &::after{
              content: '';
              width: 14rpx;
              height: 14rpx;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              border-radius: 10rpx;
              background: @theme_color;
              position: absolute;
            }
          }
        }
      }    
    }
    .citys-scroll{
      max-height:500rpx;
    }
    .list--wrap{
      display: flex;
      flex-wrap: wrap;
      max-height: 50%;
      margin-right: -30rpx;
      .item{        
        min-width:136rpx;
        height:64rpx;
        font-size:24rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding:0 20rpx;
        margin-right:20rpx;
        margin-bottom:20rpx;
        border-radius:32rpx;
        color: @font_color;
        background: #F1F4F9;
        border: 1px solid #F1F4F9; 
        box-sizing: border-box;       
        // &:nth-child(4n){
        //   margin-right:0 !important;
        // }
        &.active{
          color: @theme_color;
          border:1px solid @theme_color;
          background: #fff;
        }
      }      
    }
    .screen--title{
      font-size: 24rpx;
      color: @font_color;
      position: relative;
      display: inline-block;
      padding-right:10rpx;
    }
  }
</style>


